
import styled from 'styled-components'

var themeMap = {
  size: {
    small: '26px',
    middle: '30px',
    large: '34px'
  },
  default: {
    fontColor: '#9ca9b1',
    borderColor: '#485A6B',
    backgroundColor: '#485A6B',

    hover: {
      fontColor: 'white',
      borderColor: '#299dff',
      backgroundColor: '#299dff',
    }
  },
  primary: {
    fontColor: 'white',
    borderColor: '#299dff',
    backgroundColor: '#299dff',
    hover: {
      fontColor: 'white',
      borderColor: '#52A7F2',
      backgroundColor: '#52A7F2',
    }
  }
}

const ButtonStyle = styled.div`
  font-size: 13px;
  padding: 0px 10px;
  border-radius: 1px;
  height: ${props => themeMap.size[props.size]};
  line-height: ${props => themeMap.size[props.size]};
  text-align:center;
  display:inline-flex;
  justify-content: center;
  align-items:center;

  color: ${props => themeMap[props.type].fontColor};
  border: 1px solid ${props => themeMap[props.type].borderColor};
  background-color:${props => themeMap[props.type].backgroundColor};

  &:hover
  {
    color: ${props => themeMap[props.type].hover.fontColor};
    border: 1px solid ${props => themeMap[props.type].hover.borderColor};
    background-color:${props => themeMap[props.type].hover.backgroundColor};
    cursor:pointer;
  }

`;


export default ButtonStyle 